<template>

    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/quesManage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/quesManage' }">问卷列表</el-breadcrumb-item>
            <el-breadcrumb-item>回收站</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" ref="formInline" class="paper-search" style="margin-top: 20px" >
            <el-form-item label="搜索：" prop="paperInfo">
                <el-input  size="small" v-model="formInline.paperInfo" placeholder="输入关键字"></el-input>
            </el-form-item>
            <el-form-item prop="status">
                <el-select size="small" v-model="formInline.status" placeholder="作废问卷" disabled>
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item prop="startTime">
                <el-date-picker
                        size="small"
                        v-model="formInline.startTime"
                        align="right"
                        type="date"
                        placeholder="选择开始日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-form-item>
            <el-form-item prop="endTime">
                <el-date-picker
                        size="small"
                        v-model="formInline.endTime"
                        align="right"
                        type="date"
                        placeholder="选择结束日期"
                        :picker-options="pickerOptions"
                        @change="changeDate()">
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button size="small" @click="resetForm('formInline')">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
            </el-form-item>
        </el-form>
        <el-button  size="small" type="danger" round @click="deleteAll()" icon="el-icon-delete">清空回收站</el-button>
        <el-table
                v-loading="loading"
                ref="multipleTable"
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                stripe
                :cell-style="cellStyle"
                :header-cell-style="headerCellStyle"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="30">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="问卷列表"
                    sortable
                    width="220">
                <template slot-scope="scope">{{scope.row.title}}</template>
            </el-table-column>
            <el-table-column
                    prop="totalCount"
                    label="参与人数"
                    sortable
                    width="100">
                <template slot-scope="scope">{{scope.row.totalCount}}</template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建日期"
                    sortable
                    width="110">
                <template slot-scope="scope">{{scope.row.createTime}}</template>
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="开始日期"
                    sortable
                    width="110"
                    show-overflow-tooltip>
                <template slot-scope="scope">{{scope.row.startTime}}</template>
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    label="截止日期"
                    sortable
                    width="110"
                    show-overflow-tooltip>
                <template slot-scope="scope">{{scope.row.endTime}}</template>
            </el-table-column>
            <el-table-column
                    prop="endTime"
                    label="删除日期"
                    sortable
                    width="100"
                    show-overflow-tooltip>
                <template slot-scope="scope">{{scope.row.endTime}}</template>
            </el-table-column>

            <el-table-column
                    prop="adminName"
                    label="创建人"
                    sortable
                    width="100"
                    show-overflow-tooltip>
                <template slot-scope="scope">{{scope.row.adminName}}</template>
            </el-table-column>
            <el-table-column
                    prop="handle"
                    label="操作"
                    width="200"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <!--修改问卷信息-->
                    <el-button type="primary"
                               icon="el-icon-refresh-left"
                               circle
                               v-model="scope.row.paperId"
                               @click="resPaper(scope.row.paperId)">
                    </el-button>
                    <!--删除问卷-->
                    <el-button type="danger"
                               icon="el-icon-delete"
                               circle v-model="scope.row.paperId"
                               @click="deletePaper(scope.row.paperId)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px;display: inline-block;width:100%;" :inline="true">
            <el-button size="small" type="primary" @click="handleSelectionChange()">还原选中问卷</el-button>
            <el-button size="small" type="info" @click="toggleSelection()">取消选择</el-button>
            <!--分页-->
            <el-pagination
                    style="float: right;margin-right: 30px"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length">
            </el-pagination>
        </div>

    </div>
</template>
<script>
    import {fuzzyQuery, getPaperDetail, paperLists, deletePaper, resPapers, deleteAll} from "../../../api/paperMG";
    import vuedraggable from 'vuedraggable';

    export function formatDate(date,format){

    }

    export default {
        name: "ques-manage",
        components: {
            vuedraggable
        },
        data() {
            return {
                loading: true,
                value1: true,
                tableData: [],
                multipleSelection: [],

                //单选框-问卷状态
                options: [{
                    value: '3',
                    label: '作废问卷'
                }],
                //搜索问卷信息对象
                formInline: {
                    paperInfo: '',
                    status: '3',
                    startTime: '',
                    endTime: ''
                },

                //选择日期
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                //分页
                currentPage:1, //初始页
                pageSize:10,    //每页的数据

            }
        },
        methods: {

            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            async quesStatus(userInfo) {
                console.log("userInfo", userInfo);
                if (!userInfo.status){
                    console.log("userInfo.status==>false", userInfo.status);
                    return false;
                }
                console.log("userInfo.status==>true", userInfo.status);
                return true;
                // const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`);
                // if (res.data.code !== 200) {
                //     // 更新失败，将状态返回初始状态
                //     this.userInfo.mg_state = !this.userInfo.mg_state
                //     this.$message.error('更新用户状态失败！')
                // }
                this.$message.success('更新问卷状态成功！');
            },

            //取消多选
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },

            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pageSize = size;
                console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },

            //搜索
            search() {
                console.log("this.startTime",this.formInline.startTime);
                console.log("this.endTime",this.formInline.endTime);
                console.log("!this.paperInfo",(!this.paperInfo));
                console.log("this.paperInfo",this.formInline.paperInfo);
                console.log("this.status",this.formInline.status);
                console.log("!this.startTime",(!this.startTime));
                console.log("this.startTime == \"\"",this.startTime === "");

                const params = {
                    "remark": this.formInline.paperInfo,
                    "status": this.formInline.status,
                    "createTime": this.formInline.createTime,
                    "startTime": this.formInline.startTime,
                    "endTime": this.formInline.endTime,
                };
                console.log("this.params=====>",params);
                fuzzyQuery(params).then(res=>{
                    console.log("调用接口");
                    this.tableData = res.data;
                    this.loading = false;
                    console.log("res.data=====>",res.data);
                })
            },

            //表格单元格样式设计 --wzr 20210418
            headerCellStyle() {
                return "text-align: center;";
            },
            cellStyle({row, column, rowIndex, columnIndex}) {//根据测试结果动态调整单元格样式，成功-绿色，失败-红色，不支持-黄色
                return "text-align: center;";
                let cellStyle;
                //指定列
                if (columnIndex === 5) {

                }
                switch (row.testResult) {
                    case '成功':
                        cellStyle = 'background: green;color:white';
                        break;
                    case '失败':
                        cellStyle = 'background: red;color:white';
                        break;
                    case '不支持':
                        cellStyle = 'background: #aaa;color:white';
                        break;
                    default:
                        cellStyle = '';
                }
                if (column.label == '测试结果')
                    return cellStyle;
            },

            //还原问卷
            resPaper(paperId) {

                this.$confirm('您正在还原已作废的问卷，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const params = {
                        "paperIds":[paperId],
                    };
                    console.log("params=========>",params);
                    resPapers(params).then(res=>{
                        console.log("res=======>",res);

                        if (res.code === 200){
                            this.$message({
                                type: 'success',
                                message: '问卷还原成功!'
                            });
                            this.search();
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消还原'
                    });
                });
            },

            //删除问卷
            deletePaper(paperId){
                this.$confirm('此操作将永久删除该问卷, 请慎重操作，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const params = {
                        "paperIds":[paperId],
                        "flag":"DELETE"
                    };
                    deletePaper(params).then(res=>{
                        if (res.code === 200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.search();
                        }
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //清空回收站
            deleteAll() {
                this.$confirm('此操作将永久删除回收站所有问卷, 请慎重操作，是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteAll().then(res => {
                        if (res.code === 200) {
                            this.search();
                            this.$message.success("清空回收站成功")
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消清空回收站'
                    });
                });
            }
        },
        created() {
            this.search();
        }
    }
</script>

<style scoped>
    .el-pagination {
        display: inline-block;
    }
</style>